<template>
  <div class="left" :style="{ width: isCollapse ? '64px' : '200px' }">
    <div class="title" v-if="!isCollapse">银行管理系统</div>
    <div class="menu">
      <el-menu
        router
        :default-active="activeMenu"
        :collapse="isCollapse"
        active-text-color="#15ac77"
        text-color="#647582"
        class="el-menu-vertical-demo"
      >
        <recursive-menu
          v-for="route in menuRoutes"
          :key="route.path"
          :route="route"
          :icons="icons"
        />
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import {
  HomeFilled,
  UserFilled,
  List,
  DataAnalysis,
  DocumentCopy,
  Setting,
} from "@element-plus/icons-vue";
import router from "../router";
import RecursiveMenu from "./RecursiveMenu.vue";

const props = defineProps<{
  isCollapse: boolean;
}>();

const currentRoute = useRoute();

// 获取有效的菜单路由
const menuRoutes = computed(() => {
  const indexRoute = router.options.routes.find(
    (route) => route.path === "/index"
  );
  return (indexRoute?.children || []).filter(
    (route) => route.meta && route.meta.title && !route.meta.hidden
  );
});

// 计算当前激活的菜单
const activeMenu = computed(() => {
  // 返回完整路径（包含查询参数）
  return currentRoute.fullPath;
});

// 图标映射
const icons = {
  HomeFilled,
  UserFilled,
  List,
  DataAnalysis,
  DocumentCopy,
  Setting,
};
</script>

<style scoped lang="scss">
.left {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  transition: width 0.3s;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .title {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #00a870;
    flex-shrink: 0;
  }

  .menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    .el-menu {
      border-right: none;
      height: 100%;

      .el-menu-item.is-active {
        background-color: #eff8f4 !important;
      }
    }
  }
}
</style>
